import React, { PureComponent } from 'react'
import { Tabs, Tools } from 'weaver-mobile';

import ParterList from '../ParterList';
import DefalutJoiner from '../DefalutJoiner';

const getLabel = Tools.getLabel;

export default class DetailReadCoverage extends PureComponent {
  constructor(props) {
    super(props)
    this.prefixCls = 'cowork-detail-coverage'
    this.state = {
      tabs: [
        { key: 'range', title: getLabel(382638, '参与范围') },
        { key: 'defaultjoin', title: getLabel('524322', '默认参与人') }
      ],
      currentTab: 'range'
    }
  }

  onTabChange = (tab) => {
    this.setState({ currentTab: tab.key })
  }
  
  render() {
    const { tabs, currentTab } = this.state
    const { coworkId } = this.props;
    return (
      <div className={this.prefixCls}>
        <Tabs 
          tabs={tabs} 
          onChange={this.onTabChange} 
          page={currentTab} 
          swipeable={false}
          renderTabBar={props => <Tabs.ExpandTabBar {...props} />}
        />
        <div className={`${this.prefixCls}-container`}>
          { currentTab === 'range' && <ParterList coworkId={coworkId} />}
          { currentTab === 'defaultjoin' && <DefalutJoiner /> }
        </div>
      </div>
    )
  }
}